<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Tests for Tooltip</title>

<link rel="stylesheet" href="jquery.tooltip.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.bgiframe.js" type="text/javascript"></script>
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="chili-1.7.pack.js" type="text/javascript"></script>
<script src="jquery.tooltip.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#set1 *').Tooltip();

$('img').Tooltip({
	delay: 0
});

$('#yahoo a').Tooltip({
	track: true,
	delay: 0,
	showURL: false,
	showBody: " - "
});

$("#fancy").Tooltip({
	track: true,
	delay: 0,
	showURL: false,
	opacity: 1,
	fixPNG: true,
	showBody: " - ",
	extraClass: "pretty fancy",
	top: -15,
	left: 5
});

$('#pretty').Tooltip({
	track: true,
	delay: 0,
	showURL: false,
	showBody: " - ",
	extraClass: "pretty",
	fixPNG: true,
	opacity: 0.95,
	left: -120
});

$("map *").Tooltip();

$('#right a').Tooltip({
	track: true,
	delay: 0,
	showURL: false,
	extraClass: "right"
});
$('#right2 a').Tooltip({ showURL: false });

$("#block").click($.Tooltip.block);

});
</script>

<style type="text/css">
#extended {
	margin: 2em 0;
}

#extended label {
	text-decoration: underline;
}

#yahoo {
	width: 7em;
}

#right,#right2 {
	text-align: right;
}

#tooltip.right {
	width: 250px;
}
</style>

</head>
<body>
<h1 id="banner">jQuery Tooltip Plugin Examples</h1>
<div id="main">
<fieldset id="set1"><legend>Three elements with
tooltips, default settings</legend> <a
	title="A tooltip with default settings, the href is displayed below the title"
	href="http://google.de">Link to google</a> <br />
<label title="A label with a title and default settings, no href here"
	for="text1">Input something please!</label> <br />
<input
	title="Note that the tooltip disappears when clicking the input element"
	type="text" value="Test" name="action" id="text1" />

<h3>Code</h3>
<pre><code class="mix">$('#set1 *').Tooltip();</code></pre></fieldset>



<fieldset><legend>An image with a tooltip</legend> <img
	src="image.png" height="80"
	title="No delay. The src value is displayed below the title" />
<h3>Code</h3>
<pre><code class="mix">$('img').Tooltip({
	delay: 0
});</code></pre></fieldset>

<fieldset><legend>Blocking tooltips</legend>
<button id="block">Click this button to block/unblock all
tooltips</button>
<pre><code class="mix">$("#block").click($.Tooltip.block);</code></pre>
</fieldset>

<fieldset><legend>The next four links have no delay
with tracking, with extra content:</legend>
<div id="yahoo"><a title="Yahoo doo - more content"
	href="http://yahoo.com">Link to yahoo</a> <a
	title="Yahoo doo2 - wohooo" href="http://yahoo.com">Link to yahoo1</a>
<a title="Yahoo doo3" href="http://yahoo.com">Link to yahoo2</a> <a
	title="Yahoo doo4 - buga!" href="http://yahoo.com">Link to yahoo3</a></div>
<select>
	<option>bgiframe test</option>
</select>
<h3>Code</h3>
<pre><code class="mix">$('#yahoo a').Tooltip({
	track: true,
	delay: 0,
	showURL: false,
	showBody: " - ",
	opacity: 0.85
});</code></pre></fieldset>

<fieldset><legend>Two tooltips with extra classes.
Useful for different tooltip styles on a single page.</legend> <span id="fancy"
	title="You are dead, this is hell. - Please note the custom positioning here!">A
fancy tooltip, now with some custom positioning.</span>
<p><span id="pretty"
	title="I am pretty! - I am a very pretty tooltip, I need lot's of attention from buggers like you! Yes!">And
now, for the fancy stuff, a tooltip with an extra class for nice
shadows, and some extra content</span></p>
<br />
<br />
<br />
<select>
	<option>bgiframe test</option>
</select>
<h3>Code</h3>
<pre><code class="mix">$("#fancy").Tooltip({
	track: true,
	delay: 0,
	showURL: false,
	opacity: 1,
	fixPNG: true,
	showBody: " - ",
	extraClass: "pretty fancy",
	top: -15,
	left: 5
});

$('#pretty').Tooltip({
	track: true,
	delay: 0,
	showURL: false,
	showBody: " - ",
	extraClass: "pretty",
	fixPNG: true,
	opacity: 0.95,
	left: -120
});</code></pre></fieldset>

<fieldset><legend>Image map with tooltips.</legend> <img
	id="map" src="karte.png" width="345" height="312" border="0"
	alt="Karte" usemap="#Landkarte"><map name="Landkarte">
	<area shape="rect" coords="11,10,59,29" href="http://www.koblenz.de/"
		alt="Koblenz" title="Koblenz">
	<area shape="rect" coords="42,36,96,57" href="http://www.wiesbaden.de/"
		alt="Wiesbaden" title="Wiesbaden">
	<area shape="rect" coords="42,59,78,80" href="http://www.mainz.de/"
		alt="Mainz" title="Mainz">
	<area shape="rect" coords="100,26,152,58"
		href="http://www.frankfurt.de/" alt="Frankfurt" title="Frankfurt">
	<area shape="rect" coords="27,113,93,134"
		href="http://www.mannheim.de/" alt="Mannheim" title="Mannheim">
	<area shape="rect" coords="100,138,163,159"
		href="http://www.heidelberg.de/" alt="Heidelberg" title="Heidelberg">
	<area shape="rect" coords="207,77,266,101"
		href="http://www.wuerzburg.de/" alt="W&uuml;rzburg"
		title="W&uuml;rzburg">
	<area shape="rect" coords="282,62,344,85" href="http://www.bamberg.de/"
		alt="Bamberg" title="Bamberg">
	<area shape="rect" coords="255,132,316,150"
		href="http://www.nuernberg.de/" alt="N&uuml;rnberg"
		title="N&uuml;rnberg">
	<area shape="rect" coords="78,182,132,200"
		href="http://www.karlsruhe.de/" alt="Karlsruhe" title="Karlsruhe">
	<area shape="rect" coords="142,169,200,193"
		href="http://www.heilbronn.de/" alt="Heilbronn" title="Heilbronn">
	<area shape="rect" coords="140,209,198,230"
		href="http://www.stuttgart.de/" alt="Stuttgart" title="Stuttgart">
	<area shape="rect" coords="187,263,222,281" href="http://www.ulm.de/"
		alt="Ulm" title="Ulm">
	<area shape="rect" coords="249,278,304,297"
		href="http://www.augsburg.de/" alt="Augsburg" title="Augsburg">
	<area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310"
		href="http://www.baden-aktuell.de/" alt="Baden" title="Baden">
</map>
<h3>Code</h3>
<pre><code class="mix">$("map *").Tooltip();</code></pre></fieldset>

<fieldset><legend>Testing repositioning at viewport
borders</legend>
<p id="right">Tooltip with fixed width<br />
<a title="Short title" href="http://goggle">Google me!</a><br />
<a
	title="Rather a very very long title with no meaning but yet quite long long long"
	href="http://goggle">Google me!</a></p>
<p id="right2">Tooltip width auto width<br />
<a title="Short title" href="http://goggle">Google me!</a><br />
<a
	title="Rather a very very long title with no meaning but yet quite long long long"
	href="http://goggle">Google me!</a></p>
<h3>Code</h3>
<pre><code class="mix">$('#right a').Tooltip({
	track: true,
	delay: 0,
	showURL: false,
	extraClass: "right"
});
$('#right2 a').Tooltip({ showURL: false });</code></pre></fieldset>
</div>
</body>
</html>